<template>
  <p style="font-weight:800;">EchartsLast组件(Echarts_03)</p>
  <v-chart class="chart" :option="option" />
</template>

<script setup>

import { computed } from "@vue/reactivity";
import { ref } from "vue";
//
const data = ref([
  { value: 110, name: 'A', },
  { value: 210, name: 'B', },
  { value: 60, name: 'C', },
  { value: 77, name: 'D', },
  { value: 88, name: 'E', },
  { value: 49, name: 'F', },
  { value: 89, name: 'G', },
  { value: 99, name: 'H', },
]);

setInterval(() => {
  data.value = data.value.map(item => ({
    ...item,
    value: Math.random() * 100,
  }))
}, 1000);

const option = computed(() => {
  return {
    xAxis: {
      type: 'category',
      data: data.value.map(d => d.name),
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: data.value.map(d => d.value),
        type: 'line'
      }
    ]
  }
});

// const option = ref({
//   xAxis: {
//     type: 'category',
//     data: data.value.map(d => d.name),
//   },
//   yAxis: {
//     type: 'value'
//   },
//   series: [
//     {
//       data: data.value.map(d => d.value),
//       type: 'line'
//     }
//   ]
// });
</script>

<style lang="css" scoped>
.chart {
  height: 400px;
}
</style>